const app = new Vue({
    el: '#app',
    data: {
        books: [
            {
                id: 1,
                name: '书1',
                date: '2006-9',
                price: 87.03,
                count: 1
            }, {
                id: 2,
                name: '书2',
                date: '2006-9',
                price: 87.00,
                count: 1
            }, {
                id: 3,
                name: '书3',
                date: '2006-9',
                price: 87.03,
                count: 1
            }, {
                id: 4,
                name: '书4',
                date: '2006-9',
                price: 87.03,
                count: 1
            }
        ]
    },
    methods: {
        getFinalPrice(price) {
            return '￥' + price.toFixed(2);
        },
        decrement(index) {
            this.books[index].count--;
        },
        increment(index) {
            this.books[index].count++;
        },
        removeBtnClick(index) {
            this.books.splice(index, 1);
        }
    },
    computed: {


        totalPrice() {
            // 1.普通for循环
            // let result = 0;
            // for (let i = 0; i < this.books.length; i++) {
            //     result += this.books[i].price * this.books[i].count;
            // }
            // return result;

            // 2.for (let i in this.books)
            // let result = 0;
            // for (let i in this.books) {
            //     result += this.books[i].price * this.books[i].count;
            // }
            // return result;

            // 3. for (let book of this.books)
            // let result = 0;
            // for (let book of this.books) {
            //     result += book.price * book.count;
            // }
            // return result;

            // 4. forEach()
            let result = 0;
            this.books.forEach((book => {
                result += book.price * book.count;
            }))
            return result;

            // 5.js中Array的方法
            // return this.books.reduce(function (prev, cur) {
            //     return cur.price * cur.count + prev;
            // }, 0)

            // 数组高阶函数：filter、map、reduce
            // https://www.runoob.com/jsref/jsref-obj-array.html
            // 函数式编程，链式
            const nums = [21, 19, 30];
            // let total = nums.filter(function (n) {
            //     return n < 20;
            // }).map(function (n) {
            //     return n * 2;
            // }).reduce(function (pre, n) {
            //     return pre + n;
            // }, 0);
            // 箭头函数
            let total = nums.filter(n => n < 20).map(n => n * 2).reduce((pre, n) => pre + n);

        }
    },
    // 过滤器
    filters: {
        showFinalPrice(price) {
            return '￥' + price.toFixed(2);
        }
    }
})